import { Input, Button, Table, Pagination } from 'antd';
import { useEffect, useState } from 'react'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { getGoodsList } from '../../api/goods';
import { useNavigate } from 'react-router-dom';
const { Search } = Input;

function Goods() {
    let navigate = useNavigate();
    // 定义搜索关键字状态
    let [query, setQuery] = useState("");
    //定义加载状态
    let [loading, setLoading] = useState(false);
    // 定义当前页吗
    let [pagenum, setPagenum] = useState(1);
    // 定义每页展示几条数据
    let [pagesize, setPagesize] = useState(5);
    // 定义表格数据
    let [tableData, setTableData] = useState<UsersTableItem[]>()
    // 定义数据总数
    let [total, settotal] = useState(0);
    let pageChange = (value:number,size:number) => {
        console.log(value,size)
        setPagenum(value);
        setPagesize(size)
    }
    // 获取商品列表
    let getDataList = async ()=>{
        setLoading(true)
        let res:ResponsType= await getGoodsList({query,pagenum,pagesize});
        console.log(res)
        settotal(res.data.data.total);
        setTableData(res.data.data.goods)
        setLoading(false)
    }
    useEffect(()=>{
         getDataList();
    },[pagenum,pagesize,query])
    let columns = [
        {
            dataIndex: "index",
            title: "#",
            render(text:any,recoder:any,index:number){
                return (
                    <div>{index}</div>
                )
            },
            width: 100
        },
        {
            dataIndex: "goods_name",
            title: "商品名称"
        },
        {
            dataIndex: "goods_price",
            title: "商品价格"
        },
        {
            dataIndex: "goods_weight",
            title: "商品重量"
        },
        {
            dataIndex: "add_time",
            title: "创建时间"
        },
        {
            dataIndex: "actions",
            title: "操作",
            width: 300,
            render(text: boolean, recoder: UsersTableItem) {
                return <div>
                    <Button type='primary' size='small' icon={<EditOutlined />}>编辑</Button>&nbsp;&nbsp;
                    <Button type='primary' size='small' danger icon={<DeleteOutlined />}>删除</Button>
                </div>
            }
        },
    ]
    return (
        <div>
            <div>
                <Search placeholder="输入关键字搜索" style={{ width: 300 }} value={query} onChange={(e) => {
                    setQuery(e.target.value)
                }} />
                &nbsp;    &nbsp;
                <Button type="primary" onClick={()=>{
                    navigate('/index/addGoods')
                }}>添加商品</Button>
            </div>
            <div style={{ margin: "20px 0" }}>
                <Table bordered columns={columns} dataSource={tableData} pagination={false} rowKey='goods_id' scroll={{ x: 500 }} loading={loading}></Table>
            </div>
            <div>
                <Pagination showQuickJumper current={pagenum} pageSize={pagesize} total={total} onChange={pageChange} pageSizeOptions={[5, 10, 15, 20]} showSizeChanger />
            </div>
        </div>
    )

}

export default Goods;